﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历筛选</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 引入Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qs@6.10.3/dist/qs.min.js"></script>

    <style scoped>
        .resume-choose-container {
            height: 100%;
        }

        .el-header {
            background-color: #f5f7fa;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            padding: 0;
            margin-bottom: 10px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 自定义样式，保持与原页面相似的视觉效果 */
        .el-form-item__label {
            font-weight: bold;
            color: #333;
        }

        .el-select {
            width: 100%;
        }

        .el-input {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header style="padding: 0 10px; display: flex; align-items: center;">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>人力资源</el-breadcrumb-item>
                    <el-breadcrumb-item>招聘管理</el-breadcrumb-item>
                    <el-breadcrumb-item>简历管理</el-breadcrumb-item>
                    <el-breadcrumb-item>简历筛选查询</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>

            <el-main>
                <el-card shadow="hover" style="margin: 10px;">
                    <template #header>
                        <div class="card-header">
                            <span>简历筛选条件</span>
                        </div>
                    </template>

                    <el-form ref="searchForm" :model="form" label-width="120px">
                        <el-row :gutter="20">

                            <el-col :span="8">
                                <el-form-item label="职位分类及名称" prop="majorId">
                                    <el-cascader v-model="selectedJobValue"
                                                 :options="jobCascaderOptions"
                                                 :props="jobCascaderProps"
                                                 v-on:change="handleJobChange"
                                                 placeholder="请选择职位分类及名称"
                                                 :loading="jobLoading" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20" style="margin-top: 10px;">
                            <el-col :span="8">
                                <el-form-item label="关键字">
                                    <el-input v-model="form.primaryKey"
                                              placeholder="请输入关键字"
                                              clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-col :span="12">
                            @* <el-date-picker v-model="formData.human_birthday" *@
                            @*                 type="date" *@
                            @*                 placeholder="请选择生日" *@
                            @*                 :disabled-date="disabledDate" *@
                            @*                 style="width: 100%"></el-date-picker> *@
                            <el-form-item label="登记时间">
                                <el-date-picker v-model="form.startDate"
                                                type="date"
                                                placeholder="开始日期"
                                                style="width: 48%"
                                                v-on:change="handleDateChange"></el-date-picker>
                                <span style="margin: 0 10px;">至</span>
                                <el-date-picker v-model="form.endDate"
                                                type="date"
                                                placeholder="结束日期"
                                                style="width: 48%"
                                                v-on:change="handleDateChange"></el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-row :gutter="20" style="margin-top: 20px; justify-content: flex-end;">
                            <el-col>
                                <el-button type="primary" v-on:click="handleSearch">
                                    <i class="el-icon-search"></i> 开始查询
                                </el-button>
                                <el-button v-on:click="resetForm">
                                    <i class="el-icon-refresh"></i> 重置
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </el-main>
        </el-container>
        <el-table :data="tableData" style="width: 100%" :loading="tableLoading">
            <el-table-column prop="human_name" label="名称"></el-table-column>
            <el-table-column prop="human_major_kind_name" label="职位分类"></el-table-column>
            <el-table-column prop="human_major_name" label="职位名称"></el-table-column>
            <el-table-column prop="regist_time" label="时间">
                <template #default="scope">
                    {{ new Date(scope.row.regist_time).toLocaleDateString() }}
                </template>
            </el-table-column>
        </el-table>
    </div>

    <script type="text/javascript">
        const { createApp, ref, onMounted } = Vue;
        const { ElMessage } = ElementPlus;

        const app = createApp({
            setup() {
                // 职位级联选择器数据
                const selectedJobValue = ref([]);
                const jobCascaderOptions = ref([]);
                const jobCascaderProps = ref({
                    value: 'value',
                    label: 'label',
                    children: 'children',
                    checkStrictly: true, // 父子节点不关联
                    expandTrigger: 'click'
                });
                const jobLoading = ref(false);
                const tableLoading = ref(false);
                const tableData = ref([]);
                const total = ref(0);

                // 加载职位级联数据
                const loadJobCascaderData = async () => {
                    jobLoading.value = true;
                    try {
                        // 实际项目中这里会从后端获取数据
                        const response = await axios.get('/engage/GetJobCascaderData');
                        if (response.status === 200 && response.data) {
                            jobCascaderOptions.value = response.data;
                        } else {
                            throw new Error(response.data?.message || '获取职位数据失败');
                        }
                    } catch (error) {
                        console.error('加载职位数据错误:', error);
                        ElMessage.error('加载职位数据失败，请稍后再试');
                        // 设置默认数据
                        jobCascaderOptions.value = [
                            {
                                value: '01',
                                label: '销售类',
                                children: [
                                    { value: '0101', label: '销售经理' },
                                    { value: '0102', label: '销售代表' }
                                ]
                            },
                            {
                                value: '02',
                                label: '技术类',
                                children: [
                                    { value: '0201', label: '前端开发' },
                                    { value: '0202', label: '后端开发' }
                                ]
                            }
                        ];
                    } finally {
                        jobLoading.value = false;
                    }
                };

                // 表单数据
                const form = ref({
                    majorKindId: '',
                    majorKindName: '',
                    majorId: '',
                    majorName: '',
                    primaryKey: '',
                    startDate: '',
                    endDate: '',
                    checkStatus: false
                });

                // 处理日期选择变化
                const handleDateChange = (date) => {
                    console.log('日期选择器触发change事件', date);

                    // 验证日期范围
                    if (form.value.startDate && form.value.endDate) {
                        const start = new Date(form.value.startDate);
                        const end = new Date(form.value.endDate);

                        if (start > end) {
                            ElMessage.warning('开始日期不能晚于结束日期');
                            form.value.endDate = '';
                        }
                    }
                };

                // 处理职位级联选择变化
                const handleJobChange = (value) => {
                    // 重置职位信息
                    form.value.majorKindId = '';
                    form.value.majorKindName = '';
                    form.value.majorId = '';
                    form.value.majorName = '';

                    if (!value || value.length === 0) return;

                    // 处理职位分类
                    if (value.length >= 1) {
                        const category = jobCascaderOptions.value.find(c => c.value === value[0]);
                        if (category) {
                            form.value.majorKindId = category.value;
                            form.value.majorKindName = category.label;

                            // 处理具体职位
                            if (value.length >= 2) {
                                const job = category.children.find(j => j.value === value[1]);
                                if (job) {
                                    form.value.majorId = job.value;
                                    form.value.majorName = job.label;
                                }
                            }
                        }
                    }
                };

                // 搜索处理
                const handleSearch = async () => {
                    tableLoading.value = true;

                    try {
                        // 构建查询参数（处理空日期）
                        const params = {
                            humanMajorKindName: form.value.majorKindName,
                            humanMajorName: form.value.majorName,
                            humanName: form.value.primaryKey,
                            startDate: form.value.startDate || null,
                            endDate: form.value.endDate || null
                        };

                        // 发送API请求
                        const response = await axios.get('/engage/GetResumes', { params });

                        if (response.status === 200) {
                            // 处理返回数据
                            tableData.value = response.data.items || response.data;
                            total.value = response.data.total || tableData.value.length;
                            ElMessage.success(`查询成功，共找到 ${total.value} 条记录`);
                        } else {
                            throw new Error(response.data?.message || '查询失败');
                        }
                    } catch (error) {
                        console.error('搜索失败:', error);
                        ElMessage.error(error.message || '查询失败，请重试');
                    } finally {
                        tableLoading.value = false;
                    }
                };

                // 重置表单
                const resetForm = () => {
                    selectedJobValue.value = [];
                    form.value = {
                        majorKindId: '',
                        majorKindName: '',
                        majorId: '',
                        majorName: '',
                        primaryKey: '',
                        startDate: '',
                        endDate: '',
                        checkStatus: false
                    };
                    tableData.value = [];
                };

                // 页面加载完成后执行
                onMounted(() => {
                    // 初始化加载职位数据
                    loadJobCascaderData();
                    // 首次加载数据
                    handleSearch();
                });

                return {
                    form,
                    selectedJobValue,
                    jobCascaderOptions,
                    jobCascaderProps,
                    jobLoading,
                    handleJobChange,
                    handleDateChange,
                    handleSearch,
                    resetForm,
                    tableData,
                    tableLoading,
                    total,
                    loadJobCascaderData
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>